<template>
  <div class="header_container">
    <div class="SK-store-header-container_s move_zero">
      <div></div>
      <div class="SK_store_header_content_s" id="header_id_s">
        <div class="left_s">
          <a
            class="logo_s"
            style="
              background-repeat: no-repeat;
              background-position: center top;
            "
            ><div></div
          ></a>
          <div class="SK_header_navigation_tab_s">
            <ul class="SK_header_nav_s">
              <li class="item_s">
                <router-link to="/home">首页</router-link>
              </li>
              <li class="item_s">
                <router-link to="/shop">商店</router-link>
              </li>
              <li class="item_s">
                <router-link to="/community">社区</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="hearder_r">
          <div class="Sk_header_search_space_s">
            <div class="SK_header_search_con_s">
              <div class="search-input-enhanced">
                <div class="SK-header-search SK-header-search-cn">
                  <div class="SK-header-search-form">
                    <!-- <span class="SK-header-search-button" -->
                    >
                    <!-- <i
                        class="iconfont icon-sousuo"
                        style="font-size=20px
                      "
                      ></i></span
                    ><input
                      type="text"
                      name="search-text"
                      placeholder="请输入关键词"
                      class="SK-header-search-text"
                      autocomplete="off"
                      value=""
                    /> -->
                    <el-select
                      v-model="value"
                      multiple
                      filterable
                      remote
                      reserve-keyword
                      placeholder="请输入关键词"
                      :remote-method="remoteMethod"
                      :loading="loading"
                    >
                      <el-option
                        v-for="item in options"
                        @click.native="inGame(item)"
                        :key="item.id"
                        :label="item.label"
                        :value="item.name"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="SK_header_info_s">
            <div class="links" v-if="!show">
              <router-link to="/login">登录</router-link>
            </div>
            <div class="links" v-if="!show">
              <router-link to="/Register">注册</router-link>
            </div>
            <div class="links" v-else>
              <router-link to="/center">主页</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSelect } from "@/api";
export default {
  name: "Header",
  data() {
    return {
      options: [],
      value: [],
      name: [],
      loading: false,
      show: localStorage.getItem("userInfo") ? true : false,
    };
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.remoteClear();
        this.loading = true;
        setTimeout(() => {
          reqSelect({ gamename: query }).then((res) => {
            this.loading = false;
            // for (let i = 0; i < res.data.length; i++) {
            //   this.options.push(res.data[i]);
            // }
            this.options = res.data;
            console.log(this.options);
          });
        }, 200);
      } else {
        this.remoteClear();
      }
    },
    remoteClear() {
      this.option = [];
    },
    inGame(item) {
      let name = item.name;
      this.$router.push({
        path: "/detail",
        query: { gamename: name },
      });
    },
  },
};
</script>

<style>
@import "../assets/css/header.css";
</style>
